บทที่ 19 การสร้างเว็บไซต์แบบ AJAX (ตอนที่ 1)
เว็บเพจแบบ AJAX ก็คล้ายๆ IFRAME ในการโหลดการแสดงผลในบางส่วน ในตัวอย่างจะเป็นการใช้ AJAX เพื่อโหลดส่วน rightmodule มาแสดงด้วยฟังก์ชั่น loaddoc โดยการคลิกที่ลิงค์ ก็จะเป็นการโหลดหน้านั้นๆมาแสดง เช่น
<a href="javascript:loaddoc('page1.php')">Page1</a>
page1.php ถ้าไม่ได้อยู่ไดเรคทอรี่เดียวกันกับหน้าหลัก ให้ระบุ path ให้ถูกต้องด้วย
ส่วนที่อยากให้ดูก็คือส่วนที่เป็นสีแดง ส่วนแรก
document.getElementById("rightmodule").innerHTML='<div id="wait"><img src="../images/wait.gif" alt="" /><br /><br />กำลังโหลด...</div>';
โค้ดนี้เป็นการแสดงรูปรอโหลดเมื่อมีการเรียกฟังก์ชั่น loaddoc (ด้วยการคลิกเมนู)
req.open("GET", module, true);
module ก็คือชื่อเพจที่จะให้ AJAX เรียกมาแสดงที่ส่งมากับการเรียกฟังก์ชั่น loaddoc
นอกจากนี้เรายังสามารถให้เพจโหลดหน้าใดหน้าหนึ่งมาแสดงตอนโหลดครั้งได้โดยการแทรกโค้ด onload ใน body
<body onload="loaddoc('page1.php')">
ซึ่งจะเป็นการเรียก page1.php มาแสดงตอนโหลดครั้งแรก
สำหรับส่วนอื่นๆที่น่าสนใจในเพจนี้ ก็คือการใช้ CSS เพื่อจัด Layout ให้กับเพจ ให้คลิกขวาเพื่อ View Source ได้เลย
ตัวอย่าง
<a href="javascript:loaddoc('page1.php')">Page1</a>
page1.php ถ้าไม่ได้อยู่ไดเรคทอรี่เดียวกันกับหน้าหลัก ให้ระบุ path ให้ถูกต้องด้วย
function loaddoc(module) {
var req=Inint_AJAX();
//แสดง icon คอยการ load ก่อนเลยถ้ามีการเรียกใช้ AJAX
document.getElementById("rightmodule").innerHTML='<div id="wait"><img src="../images/wait.gif" alt="" /><br /><br />กำลังโหลด...</div>';
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
var data=req.responseText; //รับค่ากลับมา
document.getElementById("rightmodule").innerHTML=data; //แสดงผล แทนรูปรอโหลด
}
}
};
req.open("GET", module, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
req.send(null); //ส่งค่า
}ส่วนที่อยากให้ดูก็คือส่วนที่เป็นสีแดง ส่วนแรก
document.getElementById("rightmodule").innerHTML='<div id="wait"><img src="../images/wait.gif" alt="" /><br /><br />กำลังโหลด...</div>';
โค้ดนี้เป็นการแสดงรูปรอโหลดเมื่อมีการเรียกฟังก์ชั่น loaddoc (ด้วยการคลิกเมนู)
req.open("GET", module, true);
module ก็คือชื่อเพจที่จะให้ AJAX เรียกมาแสดงที่ส่งมากับการเรียกฟังก์ชั่น loaddoc
นอกจากนี้เรายังสามารถให้เพจโหลดหน้าใดหน้าหนึ่งมาแสดงตอนโหลดครั้งได้โดยการแทรกโค้ด onload ใน body
<body onload="loaddoc('page1.php')">
ซึ่งจะเป็นการเรียก page1.php มาแสดงตอนโหลดครั้งแรก
สำหรับส่วนอื่นๆที่น่าสนใจในเพจนี้ ก็คือการใช้ CSS เพื่อจัด Layout ให้กับเพจ ให้คลิกขวาเพื่อ View Source ได้เลย
ตัวอย่าง